<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="电站图片" :rules="rules.image" name="image">
            <upload-image v-model:value="form.image" />
        </a-form-item>
        <a-form-item label="电站名称" :rules="rules.name" name="name">
            <a-input v-model:value="form.name" placeholder="请输入电站名称" />
        </a-form-item>
        <a-form-item label="电站类型" :rules="rules.inverterStationTypeId" name="inverterStationTypeId">
            <a-select v-model:value="form.inverterStationTypeId" placeholder="请选择电站类型">
                <a-select-option v-for="item in station.typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="装机容量" :rules="rules.capacity" name="capacity">
            <a-input-number v-model:value="form.capacity" placeholder="请输入装机容量" suffix="kW" />
        </a-form-item>
        <a-form-item label="电费单价" :rules="rules.electricCharge" name="electricCharge">
            <a-input-number v-model:value="form.electricCharge" placeholder="请输入电费单价" addon-after="元" />
        </a-form-item>
        <a-form-item label="经度" :rules="rules.longitude" name="longitude" @focus="onMapOpen">
            <a-input-group compact>
                <a-input v-model:value="form.longitude" placeholder="请选择经度" />
                <a-button @click="onMapOpen">
                    <template #icon><environment-outlined /></template>
                </a-button>
            </a-input-group>
        </a-form-item>
        <a-form-item label="维度" :rules="rules.latitude" name="latitude" @focus="onMapOpen">
            <a-input-group compact>
                <a-input v-model:value="form.latitude" placeholder="请选择维度" />
                <a-button @click="onMapOpen">
                    <template #icon><environment-outlined /></template>
                </a-button>
            </a-input-group>
        </a-form-item>
        <a-form-item label="详细地址" :rules="rules.address" name="address">
            <a-input v-model:value="form.address" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item label="住户姓名" :rules="rules.houseName" name="houseName">
            <a-input v-model:value="form.houseName" placeholder="请输入住户姓名" />
        </a-form-item>
        <a-form-item label="住户电话" :rules="rules.houseTelphone" name="houseTelphone">
            <a-input v-model:value="form.houseTelphone" placeholder="请输入住户电话" />
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
            <dict-select v-model:value="form.status" placeholder="请输入状态" dict-code="stationStatus" />
        </a-form-item>
    </a-form>
    <q-q-map ref="mapRef" @select="onSelectPosition" />
</template>
<script setup>
import { ref, reactive } from 'vue'
import { EnvironmentOutlined } from '@ant-design/icons-vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { UploadImage, QQMap, DictSelect } from '@iframe/tools/components'
import { list } from '/@/api/Inverter/StationType'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { TelphoneRegular } from '@iframe/tools/utils/regular.js'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const mapRef = ref()

const station = reactive({
    typeList: []
})

const form = reactive({})
const rules = reactive({
    image: { required: true, message: '请选择电站图片' },
    name: { required: true, message: '请输入电站名称' },
    inverterStationTypeId: { required: true, message: '请选择电站类型' },
    capacity: { required: true, message: '请输入装机容量' },
    electricCharge: { required: true, message: '请输入电费单价' },
    longitude: { required: true, message: '请选择经度' },
    latitude: { required: true, message: '请选择维度' },
    address: { required: true, message: '请输入详细地址' },
    houseTelphone: { pattern: TelphoneRegular, message: '请正确输入手机号' },
    status: { required: true, message: '请选择状态' }
})

const queryTypeList = () => {
    list().then(result => {
        if (result.code === SUCCESS_CODE) {
            station.typeList = result.data
        }
    })
}

const onMapOpen = () => {
    mapRef.value.open({
        longitude: form.longitude,
        latitude: form.latitude
    })
}

const onSelectPosition = loc => {
    form.longitude = loc.latlng.lng
    form.latitude = loc.latlng.lat
    form.address = loc.poiaddress
}

queryTypeList()

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
